<script>
  import tree from '@/mixins/tree/index.js'
  import AjaxStore from '@/utils/store/proxyAjax'
  import store from './store'
  // import { validateNumber, validateTelephone } from '@/utils/validate'
  // import GroupTree from '@/components/DatagroupTree'

export default {
    name: 'district',
    mixins: [tree, store],
    // components: { GroupTree },
    data() {
      return {
        cNodeStr: '',
        cNode: [],
        labelWidth: '120px',

        // tree
        tree: {
          width: "280",
          accordion: false,
          isShowHeader: true,
          treeMenuButtonList: this.treeMenuBtns,
          treeOperateButtonList: this.treeOperateBtns,
          showCheckbox: false,
          selectTree: {},
          nextNodeKey: 'node',
          idKey: 'districtId',
          search: {
            searchKey: 'nodeName'
          },
          title: '行政区域',
          getNextChildNode: this.getNextNode,
          delNode: this.delNode
        },

        pidKey: 'pid',
        idKey: 'districtId',
        labelKey: 'districtName',
        nodeCheckedKey: 'checked',
        nodeChildrenKey: 'children',
        nodeLeafKey: "leaf",
        nodeIdKey: 'id',
        nodeLabelKey: 'text',

        currentNode: null,
        panelType: '',

        addNodeInfoUrl: '/v1/sys/district/add',
        updateNodeInfoUrl: '/v1/sys/district/update',
        getNextNodeUrl: '/v1/sys/district/findNextChildNodeTree',
        delNodeUrl: '/v1/sys/district/deleteNode',
        getNodeInfoUrl: '/v1/sys/district/findById',
        store: new AjaxStore({
          url: '/v1/sys/district/query'
        }),

        formPanel: {
          add: {
            model: {
              "districtId": '',
              "pid": '',
              "districtNo": '',
              "districtName": '',
              "poltype": '',
              "orderNo": '',
              "remark": ''
            },
            fields: [
              { label: '上级行政区划', prop: 'pid', placeholder: '请选择上级行政区划', anchor: 24, xType: 'SelectTree.TREE', ref: 'addPid',
                treeParams: {
                  get: {
                    url: '/v1/sys/district/findNextChildNodeTree',
                    nextNodeKey: 'pid',
                    idKey: 'districtId'
                  }
                },
                valueToLabelParams: {
                  url: '/v1/dataProvider/getDistrictName',
                  idKey: 'districtId'
                },
                on: {
                  'visible-change': val => val && this.$refs.addForm.$refs.addPid.reload()
                }
              },
              { label: '行政区划编码', prop: 'districtNo', placeholder: '输入行政区划编码', anchor: 24 },
              { label: '行政区划名称', prop: 'districtName', placeholder: '输入行政区划名称', anchor: 24 },
              { label: '行政级别', prop: 'poltype', xType: 'SelectCode.POLTYPE', placeholder: '输入行政级别', anchor: 24 },
              { label: '排序号', prop: 'orderNo', placeholder: '输入排序号', anchor: 24 },
              { label: '备注', prop: 'remark', placeholder: '输入备注', anchor: 24, type: 'textarea' }
            ],
            rules: {
              "districtNo": [{ required: true, message: '请输入行政区划编码', trigger: 'blur' }],
              "districtName": [{ required: true, message: '请输入行政区划名称', trigger: 'blur' }],
              "poltype": [{ required: true, message: '请输入行政级别', trigger: 'change' }]
            },
            title: '新增行政区划',
            type: 'ADD',
            ref: 'addForm',
            submitBtnList: this.addBtns
          },
          edit: {
            model: {
              "districtId": '',
              "pid": '',
              "districtNo": '',
              "districtName": '',
              "poltype": '',
              "orderNo": '',
              "remark": ''
            },
            fields: [
              { label: '上级行政区划', prop: 'pid', placeholder: '请选择上级行政区划', anchor: 24, xType: 'SelectTree.TREE', ref: 'editPid',
                treeParams: {
                  get: {
                    url: '/v1/sys/district/findNextChildNodeTree',
                    nextNodeKey: 'pid',
                    idKey: 'districtId'
                  }
                },
                valueToLabelParams: {
                  url: '/v1/dataProvider/getGroupName',
                  idKey: 'groupId'
                },
                on: {
                  'visible-change': val => val && this.$refs.editForm.$refs.editPid.reload()
                }
              },
              { label: '行政区划编码', prop: 'districtNo', placeholder: '输入行政区划编码', anchor: 24 },
              { label: '行政区划名称', prop: 'districtName', placeholder: '输入行政区划名称', anchor: 24 },
              { label: '行政级别', prop: 'poltype', xType: 'SelectCode.POLTYPE', placeholder: '输入行政级别', anchor: 24 },
              { label: '排序号', prop: 'orderNo', placeholder: '输入排序号', anchor: 24 },
              { label: '备注', prop: 'remark', placeholder: '输入备注', anchor: 24, type: 'textarea' }
            ],
            rules: {
              "districtNo": [{ required: true, message: '请输入行政区划编码', trigger: 'blur' }],
              "districtName": [{ required: true, message: '请输入行政区划名称', trigger: 'blur' }],
              "poltype": [{ required: true, message: '请输入行政级别', trigger: 'change' }]
            },
            title: '编辑行政区划',
            type: 'EDIT',
            ref: 'editForm',
            submitBtnList: this.editBtns
          }
        }
      }
    },
    methods: {
      getFrontStr(str, reg) {
        return str.split(reg)[0] + reg
      },
      handleSelect(node) {
        if (node.data.text) {
          if (node.parent) {
            this.handleSelect(node.parent)
          }
          this.cNode.push(node.data.text)
        }
      }
    },
    beforeCreate() {
      // 根据页面路由找出有权限访问的 url 数组
      const urlArr = (this.$route.meta && this.$route.meta.children || []).map(item => item.url)

      // 根据权限 url 数组过滤出能够使用的 按钮数组
      this.addBtns = [
        { label: '保存', methods: 'handleFormAdd', url: '/v1/sys/district/add', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: false }
      ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

      this.editBtns = [
        { label: '保存', methods: 'handleFormEdit', url: '/v1/sys/district/update', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: false }
      ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

      this.treeMenuBtns = [
        { label: '新增', methods: 'handleMenuAdd', url: '/v1/sys/district/add', icon: 'el-icon-circle-plus-outline', type: 'text', action: 'plus' },
        { label: '刷新', methods: 'refresh', url: '/v1/sys/district/findNextChildNodeTree', icon: 'el-icon-refresh', type: 'text' },
        { label: '展开', methods: 'expand', url: '/v1/sys/district/findNextChildNodeTree', icon: 'el-icon-rank', type: 'text' },
        { label: '折叠', methods: 'fold', url: '', icon: 'el-icon-arrow-up', type: 'text' }
      ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

      this.treeOperateBtns = (data) => {
        // 根据 systemType 帅选
        let btnList = []
        !data.systemType
          ? (btnList = [
            { type: 'text', url: '/v1/sys/district/add', icon: 'el-icon-plus', action: 'plus' },
            { type: 'text', url: '/v1/sys/district/deleteNode', icon: 'el-icon-delete', action: 'delete' }
          ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url))
          : (btnList = [
            { type: 'text', url: '/v1/sys/district/add', icon: 'el-icon-plus', action: 'plus' },
            { type: 'text', url: '/v1/sys/district/deleteNode', icon: 'el-icon-remove', action: 'delete' }
          ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url))
        return btnList
      }
    }
  }
</script>

<style lang="scss">
.district {
  .search-input {
    display: none;
  }
  .el-tree {
    margin-top: 0;
  }
  .right {
    .c-button-list {
      justify-content: flex-end;
    }
  }
}
</style>
